<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css滚动效果</title>
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
        }
        #body{
            /* background:url(/static/home/images/body_bg.jpg) center top; */
            background: url("./body_bg.png");

        }
        .anjchuli {
            width: 90%;
            height: 270px;
        }
        .anjchuli-bottom {
            width: 100%;
            border: 1 solid #04fdfc;
            overflow: hidden;
        }

        .anjchuli-bottom2 {
            width: 100%;
            border: 1 solid #04fdfc;
            position: relative;
            overflow: hidden;
            z-index: 3;
        }

        @keyframes anis {
            100% {
                transform: translateY(-200px)
            }
        }

        .anjchuli-bottom2 img {
            position: absolute;
        }

        .anjchuli-bottom2 {
            animation: anis 10s linear infinite;
        }

        .anjchuli-bottom2:hover {
            animation-play-state: paused;
        }
        .on-right-bottom {
            flex: 33%;
            margin: 0px 10px;
        }
        .anjchuli-head {
            display: flex;
            width: 100%;
            height: 46px;
            text-align: center;
            background-image: linear-gradient(186deg,
            #296ae8 0%,
            #3b88f4 0%,
            #4ca6ff 0%,
            #00d1fe 100%),
            linear-gradient(#04cdf4,
                    #04cdf4);
            background-blend-mode: normal,
            normal;
        }

        .anjchuli-head span {
            flex: 33%;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 50px;
            letter-spacing: 0px;
            color: #ffffff;
        }
        .anjchuli-bottom2 {
            /* height: 11px; */
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            background-color: rgba(7, 82, 123, 0.4);
            /* opacity: 0.14; */
            line-height: 58px;
            letter-spacing: 0px;
            color: #42ebea;
        }

        .anjchuli-bottom2-li {
            display: flex;
            height: 45px;
            border-bottom: 1px solid rgba(7, 62, 101, 1);
            text-align: center;
        }

        .anjchuli-bottom2-li span {
            flex: 33%;
        }
        .anjchuli-wen {
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 70px;
            letter-spacing: 0px;
            background: linear-gradient(to right, #01ffff, #0f8dff);
            -webkit-background-clip: text;
            color: transparent;
        }
    </style>
</head>
<body style=" background-size:100% 100%;" id="body">
<div class="anjchuli on-right-bottom">
    <div class="anjchuli-wen">处理中的案件/事件</div>
    <div
            style="margin-top: -10px; margin-bottom: 25px; height: 1px; width: 100px; background: linear-gradient(to right, #01ffff, #0f8dff)">
    </div>
    <div class="anjchuli-head"> <span>案件/事件</span><span>所属中队</span><span>执行人</span></div>
    <div class="anjchuli-bottom">
        <div class="anjchuli-bottom2" id="anjchuliBottom2">
            <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
            <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
            <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
            <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
            <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
            <div class="anjchuli-bottom2-li"><span>SJ042020034</span><span>大桥中队</span><span>李硕</span></div>
        </div>
    </div>
</div>

</body>
</html>
